<template>
  <div class="cart_box" >
    <div class="cart" >
             <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  > 
         <van-swipe-cell v-for="(ListtData, index) in list" :key="index">
            <van-card
              :price="ListtData.Money"
              :desc="'地址：'+ListtData.address"
              :title="ListtData.Title"
              class="goods-card"
              :thumb="ListtData.Img"
            />
            <van-icon 
             @click.stop="IconTypeFunction(ListtData.checked,index)"
              class="Icon"
              :name="ListtData.checked"
            />
            <van-button
              @click="deletes(ListtData.id)"
              slot="right"
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </van-swipe-cell>
  </van-list>
</van-pull-refresh>
       	   
          

    

 
    </div>
         <van-submit-bar :price="price" button-text="立即购买" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="AllChecked">全选</van-checkbox>
      <span slot="tip">
        你的收货地址不支持同城送,
        <span>修改地址</span>
      </span>
    </van-submit-bar>
  </div>
</template>
<script>


export default {
  data() {
    return {
      mantissa: "00",
      price: 0,
      switch: false,
      key: 1,
      list: [],
      checked: false,
      loading: false,
      finished: false,
      refreshing: false
     
   
    
    };
  },
  mounted() {
   
  },
  components: {
   
   
  },
  
  beforeCreate: function() {
    // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  },
  created: function() {
    // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

    this.Start(this.pathuiL);
  },
  beforeMount: function() {},
  methods: {
    // 在挂载开始之前被调用：相关的 render 函数首次被调用。

    Start(Api) {
      this.$store.state.arrow = false;
      this.$store.state.Title = "购物车";
      this.$store.state.LeftTitle = "";
      let THIS = this;

      THIS.axios
        .get(Api + "MyShoppingCart?usersid=" + THIS.$route.params.id)
        .then(function(response) {
          // handle success
          THIS.list = response.data;

          THIS.$store.state.cart = response.data.length
        })
        .catch(function(error) {
          // handle error
          console.log(error);
        })
        .then(function() {
          // always executed
        });
    },

    
           onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

           // 联网请求
			      this.axios.get(this.pathuiL+"MyShoppingCart?usersid=" + this.$route.params.id, {
			     
			      }).then((response) => {
			        // 请求的列表数据
             this.list =  response.data 
                this.refreshing = false
                 this.loading = true
			      }).catch((e) => {
			        // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
			         console.log(e)
			      })
  

    
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    onSubmit() {
      //提交订单
      let number = String(this.price);
      let number1 = number.slice(0, number.length - 2);
      this.price = Number(number1);
      let user = JSON.parse(localStorage.getItem("user"));
      console.log(user.MoneyNumber)
      if (user.MoneyNumber >= this.price) {

        const THIS = this;
        let Money = user.MoneyNumber - THIS.price;
        console.log(Money);
        THIS.axios
          .patch(THIS.pathuiL+"users/" + user.id, {
            MoneyNumber: Money
          })
          .then(function(response) {
            localStorage.setItem("user", JSON.stringify(response.data));
            THIS.Toast("购买成功去我的物流看看吧");
            
            THIS.price = 0;
          })
          .catch(function(error) {
            console.log(error);
          });
      } 
      //else {
      //   this.Toast("余额不足快去我的钱包充值吧！");
      // }
    },



    deletes(id) {
      //删除

      console.log(id);

      let THIS = this;
      THIS.axios
        .delete(THIS.pathuiL + "MyShoppingCart/" + id)
        .then(function(response) {
          // handle success
          console.log(response);
          THIS.Start(THIS.pathuiL);
        })
        .catch(function(error) {
          // handle error
          console.log(error);
        })
        .then(function() {
          // always executed
        });
    }, 
    //单选
    IconTypeFunction(checked, index) {
      
      if (this.list[index].checked === "circle") {
       
        this.list[index].checked = "checked";
         console.log(  this.list[index].checked);
        this.price += Number(this.list[index].Money + this.mantissa);
      } else {
   

        this.list[index].checked = "circle";
        console.log(this.list[index].checked );
        this.price -= Number(this.list[index].Money + this.mantissa);
      }
      console.log("ok",index,this.list[index].checked)
    },
    // 全选
    AllChecked() {
      this.checked = !this.checked;
      this.price = 0;
      if (this.checked) {
        this.list.forEach((itme, index) => {
          this.list[index].checked = "checked";
          this.price += Number(this.list[index].Money + this.mantissa);
        });
      } else if (!this.checked) {
        this.list.forEach((itme, index) => {
          this.list[index].checked = "circle";
          this.price - Number(this.list[index].Money + this.mantissa);
        });
      }
    },
    showImg(index) {
      this.list[index].Img;
      ImagePreview({
        images: [this.list[index].Img],
        startPosition: 1,
        onClose() {
          // do something
        }
      });
    }
  }
};
</script>

<style lang="scss"  scope>
.cart_box {
  width: 100%;
  height: 100%;
  // background-color: black;

  
  
   .cart {
     width: 100%;
     height: 76%;
     overflow-x: hidden;
   }

}

.goods-card {
  margin: 0;
  background-color: white;
  padding: 0;
}

.delete-button {
  height: 100%;
  margin: 0;
}
.Icon {
  position: absolute;
  font-size: 0.6rem;
  color: #cccccc;
  top: 73%;
  right: 3%;
}
.van-card__title {
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.5rem;
  color: red;
}
.van-card__price-currency {
  font-size: 0.55rem;
  color: green;
}
.van-card__price-integer {
  font-size: 0.45rem;
  color: red;
}
.van-card__price-decimal {
  font-size: 0.45rem;
  color: red;
}

.van-submit-bar {
 margin-bottom: 2.6rem;
}
.van-swipe-cell {
  margin: 0.5rem 0;
}
.position-box {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
}

</style>